<template>
	<view class="content">
		<view class="content-search">
			<u-search placeholder="搜索产品" :show-action="false" :animation="true" action-text="搜索" clearabled="true"
				v-model="keyword" input-align="center" height="60" class="search-input"></u-search>
		</view>
		<view class="swiper">
			<view class="wrap">
				<u-swiper :list="list" mode="dot" :effect3d="true"></u-swiper>
			</view>
		</view>
		<view class="huodong">
			<u-section title="最热活动" sub-title="查看更多"></u-section>
		</view>
		<view class="huodong-grid">
			<view class="huodong-grid-l">
				<u-grid :col="4" :border="true">
					<u-grid-item>
						<u-icon name="photo" :size="46"></u-icon>
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="lock" :size="46"></u-icon>
						<view class="grid-text">锁头</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">沙漏</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">沙漏</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="huodong">
			<u-section title="最新产品" sub-title="查看更多"></u-section>
		</view>
		<view class="container">
			<view class="container-item">
				<view class="container-item-con">
					<view class="container-head">
						<image src="../../static/logo.png" class="container-img"></image>
					</view>
					<view class="container-title">CANMAKE/金田金田金田金田金田金田金田金田金田金田金田</view>
					<view class="container-item-footer">
						<view class="container-money">￥ 38923.99</view>
						<view class="container-footer">
							销量 12
						</view>
					</view>
				</view>
			</view>
			<view class="container-item">
				<view class="container-item-con">
					<view class="container-head">
						<image src="../../static/logo.png" class="container-img"></image>
					</view>
					<view class="container-title">CANMAKE/金田金田金田金田金田金田金田金田金田金田金田</view>
					<view class="container-item-footer">
						<view class="container-money">￥ 38923.99</view>
						<view class="container-footer">
							销量 12121323123
						</view>
					</view>
				</view>
			</view>
			<view class="container-item">
				<view class="container-item-con">
					<view class="container-head">
						<image src="../../static/logo.png" class="container-img"></image>
					</view>
					<view class="container-title">CANMAKE/金田金田金田金田金田金田金田金田金田金田金田</view>
					<view class="container-item-footer">
						<view class="container-money">￥ 38923.99</view>
						<view class="container-footer">
							销量 12121323123
						</view>
					</view>
				</view>
			</view>
			<view class="container-item">
				<view class="container-item-con">
					<view class="container-head">
						<image src="../../static/logo.png" class="container-img"></image>
					</view>
					<view class="container-title">CANMAKE/金田金田金田金田金田金田金田金田金田金田金田</view>
					<view class="container-item-footer">
						<view class="container-money">￥ 38923.99</view>
						<view class="container-footer">
							销量 12121323123
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: 'Hello',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				GoodMode: 'aspectFit'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	/* #ifdef MP-WEIXIN */
	page {
		background-color: #f2f2f2;
	}

	/* #endif */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.content-search {
		height: 80upx;
		display: flex;
		align-items: center;
		width: 100%;
		background-color: #FFFFFF;
		justify-content: center;
	}

	.search-input {
		width: 90%;
	}

	.swiper {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.wrap {
		background: #fff;
		margin: 20rpx;
	}

	.huodong {
		width: 100%;
		padding: 20rpx 40rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba($color: #cccccc, $alpha: 0.61);
	}

	.huodong-grid {
		width: 100%;
		padding: $padding-top-left;
		background-color: #FFFFFF;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.container-item {
		width: 50%;
		overflow: hidden;
		margin-top: 10upx;
	}

	.container-head {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.container-head .container-img {
		width: 100%;
		max-height: 400rpx;

	}

	.container-item-con {
		width: 92%;
		margin: 0 auto;
		background: #fff;
		padding-bottom: 10upx;
		border-radius: 10upx;
	}

	.container-title {
		text-indent: 1.2em;
		margin-top: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.container-item-footer {
		display: flex;
		flex-direction: row;
		margin: 20upx 0;
		font-size: 28upx;
	}

	.container-money {
		color: #fa2c19;
		font-weight: 400;
		margin-right: 10upx;
	}

	.container-footer,
	.container-money {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}
</style>
